<template>
  <div class="AdvertSpaceIndex">
    <el-card class="box-card">
      <div slot="header" class="header-group">
        <el-input
          v-model="searchName"
          placeholder="请输入搜索内容"
          @keyup.enter.native="loadAllTeacher"
          clearable
          @clear="loadAllTeacher"
          ><el-button
            slot="append"
            icon="el-icon-search"
            @click="loadAllTeacher"
          ></el-button>
        </el-input>
        <!-- <el-button @click="handleCreate">添加教师</el-button> -->
      </div>
      <!-- 底部菜单列表展示区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" align="center" width="60">
          <template slot-scope="scope"
            >{{ scope.$index + 1 + 10 * (page - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="id" align="center"> </el-table-column>
        <el-table-column prop="nickName" label="用户昵称" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="用户名" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
        </el-table-column>
        <el-table-column prop="position" label="职位" align="center">
        </el-table-column>
        <el-table-column prop="userImg" label="头像" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.userImg" alt="" class="user-img" />
          </template>
        </el-table-column>
        <el-table-column label="启用" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.ustatus"
              active-value="true"
              inactive-value="false"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleDisabled(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="loadAllTeacher"
        @current-change="loadAllTeacher"
        :current-page.sync="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="teacherInfo" label-width="70px">
        <el-form-item label="用户昵称" v-if="teacherInfo.id">
          <el-input v-model="teacherInfo.nickName"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="teacherInfo.userName"
            :disabled="teacherInfo.id != undefined"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" v-if="!teacherInfo.id">
          <el-input v-model="teacherInfo.password" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="teacherInfo.sex" placeholder="请选择性别">
            <el-option
              v-for="(item, index) in ['男', '女']"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="teacherInfo.position" placeholder="清选择职位">
            <el-option
              v-for="(item, index) in positionList"
              :key="index"
              :label="item.position"
              :value="item.position"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教师头像">
          <course-image
            v-model="teacherInfo.userImg"
            label=""
            :limit="5"
          ></course-image>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllTeacherInfo,
  delTeacherInfo,
  disableTeacherInfo,
  addAdmin,
  editTeacherInfo,
  getPositionList,
} from "@/services/studentManager";
import CourseImage from "./components/CourseImage";

export default {
  name: "AdvertIndex",
  components: {
    CourseImage,
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      teacherInfo: {
        userName: "",
        password: "",
        sex: "男",
        position: "学生",
        userImg: "",
      },
      title: "",
      positionList: [],
      searchName: "",
      page: 1,
      pageSize: 10,
      total: 10,
    };
  },
  created() {
    // this.loadSpaceAll();
    this.loadPosistionAll();

    this.loadAllTeacher();
  },
  methods: {
    handleEdit(rowData) {
      this.title = "修改教师信息";
      Object.keys(rowData).forEach((key) => {
        this.teacherInfo[key] = rowData[key];
      });
      this.dialogVisible = true;
    },
    handleDelete(rowData) {
      this.$confirm("此操作将永久删除该账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          delTeacherInfo({ userId: rowData.id }).then((res) => {
            if (res.data.msg) {
              this.loadAllTeacher();

              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleDisabled(rowData) {
      disableTeacherInfo({ id: rowData.id, astatus: rowData.astatus }).then(
        (res) => {
          if (res.data.msg) {
            this.$message({
              message: `${rowData.astatus ? "启" : "停"}用成功`,
              type: "success",
            });
          }
        }
      );
    },
    handleCreate() {
      this.title = "添加教师账号";
      this.teacherInfo = {
        userName: "",
        password: "123456",
        sex: "男",
        position: "Web前端工程师",
        userImg: "",
      };
      this.dialogVisible = true;
    },
    // 获取所有菜单信息
    async loadAllTeacher() {
      const { data } = await getAllTeacherInfo({
        searchName: this.searchName,
        page: this.page,
        pageSize: this.pageSize,
      });
      if (data.data) {
        this.tableData = data.data.userInfos;
        this.total = data.data.total;
      }
    },
    async onSubmit() {
      if (this.teacherInfo.id) {
        var { data } = await editTeacherInfo(this.teacherInfo);
      } else {
        var { data } = await addAdmin(this.teacherInfo);
      }
      if (data.msg == "用户名已被占用，换个试试！") {
        this.$message.warning(data.msg);
      } else {
        this.$message.success(data.msg);
        this.loadAllTeacher();
        this.dialogVisible = false;
      }
    },
    async loadPosistionAll() {
      const { data } = await getPositionList();
      this.positionList = data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.header-group {
  display: flex;
  justify-content: space-between;
  .el-input {
    width: 250px;
  }
}

.user-img {
  width: 100px;
  height: 100px;
}

::v-deep .el-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-pagination {
    margin-top: 30px;
  }
}
::v-deep .el-form-item__label {
  text-align-last: justify;
}
</style>

